<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		    div{
		        
		    }
		    ul{
		        display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display:flex;
		        padding: 0;
		        margin: 0 auto;
		        max-width: 80%;
		        border: 1px solid red;
		        list-style: none;
		    }
		    li{
		        -webkit-box-flex: 1;
                -webkit-flex: 1;
                -ms-flex: 1; 
                flex:1;
                display: block;
		        text-align: center;
		        background-color: yellowgreen;
		    }
		</style>
	</head>
	<body>
	    <div id="app">
	        <com-nav :navs="navs"></com-nav>
	    </div>
	    <script type="text/javascript" src="../lib/vue.min.js" ></script>
	    <script type="text/javascript" src="nav.js" ></script>
	    <script>
	        new Vue({
	            el:'#app',
	            data:{
	                navs:[
	                   {name:'首页', link:'#home'},
	                   {name:'产品', link:'#product'},
	                   {name:'关于我们', link:'#about'}
	                ]
	            }
	        });
	    </script>
	</body>
</html>
